<template>
  <div class="ana-pie">
    <div class="pie" ref="pie"></div>
  </div>
</template>

<script lang="ts">
import {
  onMounted,
  getCurrentInstance,
  ref,
  defineComponent,
  computed,
} from 'vue';
import * as echarts from 'echarts';
export default defineComponent({
  name: 'AnaBarV',
  props: {
    options: {
      required: true,
      type: Array,
    },
    values: {
      required: true,
      type: Array,
    },
    number: {
      required: true,
      type: Number,
    },
    options2: {
      type: Array,
      default: [],
    },
    data: {
      type: Array,
      default: [],
    },
  },
  setup(props) {
    onMounted(() => {
      init();
    });
    const { proxy } = getCurrentInstance() as any;
    const pie = ref(null);
    const data = computed(() => {
      let array = [];
      for (let i = 0; i < props.options.length; i++) {
        array.push({
          name: props.options[i],
          value: props.values[i],
        });
      }
      console.log(array);
      return array;
    });
    const init = () => {
      const myChart = proxy.$echarts.init(proxy.$refs.pie);
      let option;
      option = {
        color: [
          '#a4e0f7',
          '#fbda89',
          '#F08080',
          '#90EE90',
          '#C0C0C0',
          '#4169E1',
          '#FDF5E6',
          '#FF8C00',
        ],
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '选择人数',
            type: 'pie',
            radius: '50%',
            data: data.value,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
      window.onresize = function () {
        // 自适应大小
        myChart.resize();
      };
    };
  },
});
</script>

<style scoped lang="scss">
.ana-pie {
  height: 50vh;
  width: 50vw;
  div {
    height: 50vh;
    width: 60vw;
  }
}
</style>
